var randomScalingFactor = function(){ return Math.round(Math.random()*1000)};
	
	var lineChartData = {
			labels : [],
			datasets : [
				{
					label: "My Second dataset",
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 1)",
					pointColor : "rgba(48, 164, 255, 1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(48, 164, 255, 1)",
					data : []
				}
			]

		}
		
	var barChartData = {
			labels : [],
			datasets : [
				{
					fillColor : "rgba(48, 164, 255, 0.2)",
					strokeColor : "rgba(48, 164, 255, 0.8)",
					highlightFill : "rgba(48, 164, 255, 0.75)",
					highlightStroke : "rgba(48, 164, 255, 1)",
					data : []
				}
			]
	
		}

	var pieData = [
				{
					value: 300,
					color:"#30a5ff",
					highlight: "#62b9fb",
					label: "Blue"
				},
				{
					value: 50,
					color: "#ffb53e",
					highlight: "#fac878",
					label: "Orange"
				},
				{
					value: 100,
					color: "#1ebfae",
					highlight: "#3cdfce",
					label: "Teal"
				},
				{
					value: 120,
					color: "#f9243f",
					highlight: "#f6495f",
					label: "Red"
				}

			];
			
	var doughnutData = [
					{
						value: 300,
						color:"#30a5ff",
						highlight: "#62b9fb",
						label: "Blue"
					},
					{
						value: 50,
						color: "#ffb53e",
						highlight: "#fac878",
						label: "Orange"
					},
					{
						value: 100,
						color: "#1ebfae",
						highlight: "#3cdfce",
						label: "Teal"
					},
					{
						value: 120,
						color: "#f9243f",
						highlight: "#f6495f",
						label: "Red"
					}
	
				];

window.onload = function(){



	var chart3 = document.getElementById("doughnut-chart").getContext("2d");
	window.myDoughnut = new Chart(chart3).Doughnut(doughnutData, {responsive : true
	});
	var chart4 = document.getElementById("pie-chart").getContext("2d");
	window.myPie = new Chart(chart4).Pie(pieData, {responsive : true
	});
	
};

//$("button").click(function(){
		$.get("/lumino/traffic.php",function(data,status){
		    // alert("数据: " + data + "\n状态: " + status);
                     console.log(data);
                     var json = eval('(' + data + ')');
                     var ip_arrary = new Array();　
                     var upload_array = new Array();　
                     var total_bindwidth=0;
                     $('fog_ip').empty()
				for(var i=0,l=json.length;i<l;i++){
					for(var key in json[i]){
					//console.log(key+':'+json[i][key]);
                                            if(key == 'fog_ip')
                                            {

                                                  ip_arrary.push(json[i][key])   
                                                   jQuery("#fog_ip").append("<option value='"+json[i][key]+"'>"+json[i][key]+"</option>");  
                                            }
                                            if(key == 'fog_upload')
                                            {
                                                  upload_array.push(json[i][key])  
                                                  total_bindwidth= total_bindwidth+parseInt(json[i][key], 10); //returns 10
                                            }
					}
				}
                    console.log(ip_arrary);
                    console.log(upload_array);
                    barChartData.labels=ip_arrary;
                    barChartData.datasets[0].data=upload_array;
			var chart2 = document.getElementById("bar-chart").getContext("2d");
			chart2.clearRect(0, 0, chart2.width, chart2.height);

			if(window.myBar)
			{
				window.myBar.destroy();
			}

			window.myBar = new Chart(chart2).Bar(barChartData, {
				responsive : true
			});
			//window.myBar.removeData();
            show_total_bindwidth(total_bindwidth);

			get_traffic_by_ip($("#fog_ip").val()) ;


	 });
//});
function get_traffic_by_ip(ip)
{

	var queryurl = "/lumino/traffic.php?ip="+ip
            console.log( "url is : "+queryurl );
            $.get(queryurl,function(data,status){
                 console.log( data );

                var json = eval('(' + data + ')');
                     var time_arrary = new Array();　
                     var upload_array = new Array();　
				for(var i=0,l=json.length;i<l;i++){
					for(var key in json[i]){
                               
                                            if(key == 'fog_upload')
                                            {
                                                  upload_array.push(json[i][key])   
                                            }
                                            if(key == 'fog_last_time')
                                            {
                                                  var newDate = new Date();
                                                  newDate.setTime(json[i][key] * 1000);
                                                  console.log(newDate.toLocaleString());
                                                  time_arrary.push(newDate.toLocaleString())  
                                            }
					}
				}

                    lineChartData.labels=time_arrary.reverse();;
                    lineChartData.datasets[0].data=upload_array.reverse();;
             	    var chart1 = document.getElementById("line-chart").getContext("2d");

            if(window.myLine)
			{
				window.myLine.destroy();
			}
	            window.myLine = new Chart(chart1).Line(lineChartData, {
		    responsive: true
	            });
                chart1.clearRect(0, 0, chart1.width, chart1.height);

	            //window.myLine.removeData(();
      });

}
$('#fog_ip').on('change', function() {
            console.log( this.value ); // or $(this).val()
            
             get_traffic_by_ip(this.value);   
});

function show_total_bindwidth(total_bindwidth,id)
{
   var myChart_total = echarts.init(document.getElementById(id));

	 var  option = {
	    backgroundColor: '#1b1b1b',
	    tooltip : {
	        formatter: "{a} <br/>{c} {b}"
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
        series : [
        {
            name:'速度',
            type:'gauge',
            min:0,
            max:550,
            splitNumber:11,
            radius: '98%',
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length :15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length :25,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width:3,
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
            },
            title : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
                backgroundColor: 'rgba(30,144,255,0.8)',
                borderWidth: 1,
                borderColor: '#fff',
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                offsetCenter: [0, '50%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data:[{value: 40, name: 'M bps/s'}]
        }
    ]
};


	     console.log("show_total_bandwidth set option and total :"+total_bindwidth);
                     //option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
             option.series[0].data[0].value = total_bindwidth;

             console.log(parseInt((total_bindwidth/11), 10));
             console.log((total_bindwidth/11)+1);
             console.log(((total_bindwidth/11)+1)*11);

             option.series[0].max = (parseInt((total_bindwidth/11), 10)+2)*11;
             
		     myChart_total.setOption(option);

}
  
